<template>
  <div id="building">
    <div style="width: 100%;height: 100vh; display: flex;justify-content: center;align-items: center">
      <div style="width: 300px; height: 380px;box-shadow: 0 5px 15px rgba(0, 0, 0, .8); display: flex;justify-content: center;align-items: center;">
        <el-form :model="form" size="normal" style="height: 100% ;width: 220px;" ref="form" :rules="rules">
          <div style="width: 100%;height: 40px;margin-top:10px;line-height: 40px;text-align: center">
            <span style="color: #60bae3;font-weight: 900;font-size: 30px;">Login</span>
          </div>
          <el-form-item style="margin-top: 20px" prop="phone">
            <el-input v-model.number="form.phone"  prefix-icon="el-icon-user-solid" placeholder="请输入手机号码"></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input v-model="form.password" prefix-icon="el-icon-lock" placeholder="请输入密码" show-password></el-input>
          </el-form-item>
          <el-form-item prop="agree">
            <el-checkbox v-model="form.agree">我已阅读并同意用户协议</el-checkbox>
          </el-form-item>
          <el-form-item>
            <el-button style="color: white; border-radius: 30px;width: 100%;height: 50px;background: linear-gradient(90deg,#3cadeb,#9c88ff);" @click="login">登录</el-button>
          </el-form-item>
          <el-form-item style="text-align: left;margin-top:25px;">
            <label style="font-size: 14px;">
              没有账号
            </label>
            <el-link @click="toRegister" style="font-size: 14px;font-weight: 500;opacity: 0.8;text-decoration: underline">立即注册</el-link>
            <el-link href="/" type="info"  style="font-size: 14px;font-weight: 500;opacity: 0.8;margin-left:40px;text-decoration: underline">
              忘记密码
            </el-link>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import request from "@/utils/request";

export default {
  name: "Login",
  data(){
    var checkAgree = (rule, value, callback)=>{
      if(value){
        callback()
      }else{
        callback(new Error('请勾选同意协议'))
      }
    }
    var checkPhone  = (rule, value, callback)=>{
      if(!value){
        return callback(new Error('手机号码不能为空'));
      }
      setTimeout(()=>{
        if(!Number.isInteger(value)){
          callback(new Error('请输入数字值'));
        }
      },1000);
    }
    return{
      form:{},
      rules: {
        phone: [
          {   required: true, trigger: 'blur',validator: checkPhone },
          // { pattern: /^1[3|5|7|8|9]\d{9}$/, message: '请输入正确的号码格式', trigger: 'change' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
        ],
        agree:[
          { trigger: 'blur',validator: checkAgree},
        ]
      }
    }
  },
  created() {
    sessionStorage.clear()
    sessionStorage.removeItem("user");
    sessionStorage.removeItem("manger");
  },
  methods:{
    toRegister(){
      this.$router.push("/register")
    },
    login(){
      var _this = this
      // console.log('this.$store.state :>> ', this.$store.state);
      this.$refs['form'].validate((valid) => {
        if (valid) {
          request.get("/user/login",{
            params:{
              phone:this.form.phone,
              password:this.form.password,
            }
          }).then(res => {
            console.log(res);
            if(res.code=='200'&&res.data.hasOwnProperty('manger')){
              this.$message({
                type: "success",
                message: "登录成功"
              })
              console.log("res.date.manger--login:",res.data.manger)
              //存到vuex中
              _this.$store.commit('setManger',res.data.manger)
              _this.$store.commit('setLoggedIn',res.result)
              sessionStorage.setItem("manger",JSON.stringify(res.data.manger));//缓存用户信息
              this.$router.push("/m/commodity");//登录成功后的页面跳转
            }
            else if (res.code=='200'&&res.data.hasOwnProperty('user')){
              if(res.data.user.state===2){
                  this.$message({
                  type: "warning",
                  message: "该账号已被封禁"
                })
              }else{
                this.$message({
                  type: "success",
                  message: "登录成功"
                })
                console.log("res.date.user--login:",res.data.user)
                //存到vuex中
                _this.$store.commit('setUser',res.data.user)
                _this.$store.commit('setLoggedIn',res.result)
                sessionStorage.setItem("user",JSON.stringify(res.data.user));//缓存用户信息
                this.$router.push("/");//登录成功后的页面跳转
              }
            }
            else {
              this.$message({
                type: "warning",
                message: "账号或密码错误"
              })
            }
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });

    }
  }
}
</script>

<style scoped>
  #building{
    /* background-image:url("D:\WorkPlace\project\Klara\klara-manger\src\assets\undraw_exploring_re_grb8.svg"); */
    width:100%;
    height:100%;
    position:fixed;
    /* margin-left: 15%; */
    background-size:100% 100%;
    background: url(../static/undraw_exploring_re_grb8.svg) no-repeat;
    background-size:cover;  /**让背景图基于容器大小伸缩**/
    /* background-attachment:fixed;  */
      
  }
</style>